<template>
    <div class="admin-first-category">
        <div class="admin-first-header">产品一级分类</div>
        <div class="admin-first-content">
            <span><el-button type="primary" @click="dialogVisibleAdd = true">新增</el-button></span>
            <div>
                <el-table v-loading="loading" :data="firstCategoryData" style="width: 100%">
                    <el-table-column prop="id" label="ID" width="180" />
                    <el-table-column prop="title" label="中文标题" width="180" />
                    <el-table-column prop="title_en" label="英文标题" width="180" />
                    <el-table-column label="操作">
                        <template v-slot:default="scope">
                            <el-button type="danger" :icon="Delete" circle @click="deleteFirstCategory(scope.row.id)" />
                            <el-button type="primary" :icon="Edit" circle @click="updateFirstCategory(scope.row)" />
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 新增数据 -->
        <el-dialog v-model="dialogVisibleAdd" title="新增一级分类" width="350" :before-close="handleClose">
            <el-form :model="formFirstCategory" label-width="auto" style="max-width: 300px; min-height: 100px;">
                <el-form-item label="标题（中文）">
                    <el-input v-model="formFirstCategory.title" />
                </el-form-item>
                <el-form-item label="标题（英文）">
                    <el-input v-model="formFirstCategory.title_en" />
                </el-form-item>
            </el-form>
            <div style="text-align: center; margin-top: 20px;"><el-button type="primary"
                    @click="onSubmitAddFirstCategory">新增</el-button></div>
        </el-dialog>
        <!-- 更新数据 -->
        <el-dialog v-model="dialogVisibleUpdate" title="更新一级分类" width="350" :before-close="handleCloseUpdate">
            <el-form :model="formFirstCategory" label-width="auto" style="max-width: 300px; min-height: 100px;">
                <el-form-item label="标题（中文）">
                    <el-input v-model="formFirstCategory.title" />
                </el-form-item>
                <el-form-item label="标题（英文）">
                    <el-input v-model="formFirstCategory.title_en" />
                </el-form-item>
            </el-form>
            <div style="text-align: center; margin-top: 20px;"><el-button type="primary"
                    @click="onSubmitUpdateFirstCategory">更新</el-button></div>
        </el-dialog>
        <!-- 删除确认 -->
        <el-dialog v-model="deleteFirstCategoryDialog" title="删除一级分类" width="500" align-center>
            <span>请确认此一级产品分类下是否还存在二级分类数据，否则会影响二级分类的正常显示</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="onSubmitDeleteFirstCategoryCancle">取消</el-button>
                    <el-button type="danger" @click="onSubmitDeleteFirstCategory">
                        删除
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { Delete, Edit } from '@element-plus/icons-vue';
import { addFirstCategory, listFirstCategory, delFirstCategory } from '../../requests/index';
const loading = ref(true);
const firstCategoryData = ref([]);
const dialogVisibleAdd = ref(false);
const dialogVisibleUpdate = ref(false);
const deleteFirstCategoryDialog = ref(false);
const formFirstCategory = reactive({
    id: null,
    title: "",
    title_en: ""
});
// 获取一级分类列表
const getFirstCategory = async () => {
    const res = await listFirstCategory();
    if (res.status === 2000) {
        firstCategoryData.value = res.data;
    } else {
        ElMessage.error("获取一级分类列表失败")
    }
    loading.value = false;
};
getFirstCategory();

// 点击关闭按钮则重置对象 formFirstCategory
const handleClose = () => {
    formFirstCategory.id = null;
    formFirstCategory.title = "";
    formFirstCategory.title_en = "";
    dialogVisibleAdd.value = false;
};
const handleCloseUpdate = () => {
    formFirstCategory.id = null;
    formFirstCategory.title = "";
    formFirstCategory.title_en = "";
    dialogVisibleUpdate.value = false;
};

// 添加记录
const onSubmitAddFirstCategory = async () => {
    const res = await addFirstCategory(formFirstCategory);
    if (res.status === 2000) {
        ElMessage({
            message: "创建一级分类成功！",
            type: 'success'
        });
        handleClose();
        getFirstCategory();
    } else {
        ElMessage.error("创建一级分类失败")
    }
}
// 打开确认删除记录框
const deleteFirstCategory = (id) => {
    formFirstCategory.id = id;
    deleteFirstCategoryDialog.value = true;
}
// 打开更新记录框
const updateFirstCategory = (row) => {
    formFirstCategory.id = row.id;
    formFirstCategory.title = row.title;
    formFirstCategory.title_en = row.title_en;
    dialogVisibleUpdate.value = true;
};

// 更新记录框
const onSubmitUpdateFirstCategory = async () => {
    // 更新记录
    const updateRes = await addFirstCategory(formFirstCategory);
    if (updateRes.status === 2000) {
        ElMessage({
            message: "更新一级分类成功！",
            type: 'success'
        });
        handleCloseUpdate();
        getFirstCategory();
    } else {
        ElMessage.error("更新一级分类失败")
    }
};
// 删除记录
const onSubmitDeleteFirstCategory = async () => {
    var reqData = { "id": formFirstCategory.id };
    const res = await delFirstCategory(reqData);
    if (res.status === 2000) {
        ElMessage.success("删除成功");
        formFirstCategory.id = null;
    } else {
        ElMessage.error("删除失败")
    };
    deleteFirstCategoryDialog.value = false;
    getFirstCategory();
};
// 取消删除记录
const onSubmitDeleteFirstCategoryCancle = () => {
    formFirstCategory.id = null;
    deleteFirstCategoryDialog.value = false;
};

</script>

<style scoped>
.admin-first-header {
    margin-top: 20px;
    margin-left: 20px;
    height: 40px;
    line-height: 40px;
    background-color: #F9F9F9;
}

.admin-first-content {
    margin-top: 10px;
    margin-bottom: 50px;
    margin-left: 20px;
}

.admin-first-category {
    min-height: 100px;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .avatar {
    height: 200px;
    display: block;
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>